<template>
  <div flex>
    <div class="flex_1 border_right padding_right_10">
      <!-- <div>表单</div> -->
      <avue-form ref="form" v-model="obj" :option="option" @submit="handleSubmit">
        <!-- <template slot="menuForm" slot-scope="scope">
          <el-button @click="tip">生成PDF文件</el-button>
        </template> -->
      </avue-form>

    </div>
    <div id="view_warper" class="flex_1 margin_left_10 view_warper">
      <!-- <div>预览</div> -->
      <h1 class="text_align_center">火灾现场勘验笔录</h1>
      <p class="text_align_right">第 <span>{{ obj.time || '--' }}</span> 次勘验</p>
      <p>勘验时间：<span>{{ parseTime(obj.startTime,"{y}年{m}月{d}日{h}时{i}分") || '--' }}</span> 至 <span>{{ parseTime(obj.endTime,"{y}年{m}月{d}日{h}时{i}分")|| '--' }}</span></p>
      <p>勘验地点：<span>{{ obj.address || '--' }}</span></p>
      <p>勘验人员姓名、单位、职务（含技术职务）：<span>{{ obj.inquirytorName || '--' }}</span></p>
      <p>勘验气象条件（天气、风向、温度）：<span>{{ obj.recordtorName || '--' }}</span> 工作单位：<span>{{ obj.recordtorOrg || '--' }}</span></p>
      <p>
        被勘验人 <span>{{ obj.reInquirytorName || '--' }} </span>
        性别 <span>{{ obj.$reInquirytorSex || '--' }} </span>
        年龄 <span>{{ obj.reInquirytorAge || '--' }} </span>
        出生日期  <span>{{ parseTime(obj.reInquirytorBirth,"{y}年{m}月{d}日") || '--' }} </span>
        身份证种类  <span>{{ obj.$reInquirytorCardType || '--' }} </span>
        证件号码  <span>{{ obj.reInquirytorCardNum || '--' }} </span>
        {{ obj.reInquirytorIsNpc === "1"?'√':'□' }} 是
        {{ obj.reInquirytorIsNpc === "1"?'□':'√' }} 否
        人大代表
        现住址 <span>{{ obj.reInquirytorAddressNow || '--' }} </span>
        联系电话 <span>{{ obj.reInquirytorPhone || '--' }} </span>
        户籍所在地 <span>{{ obj.reInquirytorAddressOld || '--' }} </span>
        （<span>
          <span :style="obj.reInquirytorGoType !== '0' && 'text-decoration: line-through;'">口头传唤 </span>
          <span :style="obj.reInquirytorGoType !== '1' && 'text-decoration: line-through;'">被扭送 </span>
          <span :style="obj.reInquirytorGoType !== '2' && 'text-decoration: line-through;'">自动投案</span>
        </span>
        的被勘验人
        <span>{{ parseTime(obj.reInquirytorStartTime,"{y}年{m}月{d}日{h}时{i}分") || '--' }}</span> 到达
        <span>{{ parseTime(obj.reInquirytorEndTime,"{y}年{m}月{d}日{h}时{i}分") || '--' }}</span> 离开，
        本人签名<span>{{ obj.inquirytorName || '--' }}</span>）
        <!-- 证件号码  <span>{{ obj.reInquirytorCardNum || '--' }} </span> -->
      </p>
      <p>笔录内容</p>
      <pre>{{ obj.content }}</pre>

      <!-- <div class="" flex="dir:top cross:center" style="position: absolute;bottom: 60px;right: 20px;">
        <el-button size="mini" type="primary" plain>打印</el-button>
        <el-button class="margin_top_10" type="danger" size="mini" plain @click="handleDown">生成PDF</el-button>
      </div> -->

    </div>
  </div>
</template>

<script>
const pickerOptions = {
  shortcuts: [{
    text: '今天',
    onClick(picker) {
      picker.$emit('pick', new Date())
    }
  }, {
    text: '昨天',
    onClick(picker) {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      picker.$emit('pick', date)
    }
  }, {
    text: '一周前',
    onClick(picker) {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      picker.$emit('pick', date)
    }
  }]
}
export default {
  data() {
    return {
      obj: {}
    }
  },
  computed: {
    option() {
      return {
        submitText: '保存内容',
        index: false,
        // labelWidth: '110',
        column: [
          {
            label: '勘验次数',
            prop: 'time',
            span: 24,
            type: 'input-number',
            value: '2'
          },
          {
            label: '开始时间',
            prop: 'startTime',
            type: 'datetime',
            value: new Date(),
            pickerOptions: pickerOptions
          },
          {
            label: '结束时间',
            prop: 'endTime',
            type: 'datetime',
            value: new Date(),
            pickerOptions
          },
          {
            label: '勘验地点',
            prop: 'address',
            span: 24,
            value: '萧山区西兴街道智联社区香山公寓1幢1单元1206室'
          }

        ],
        group: [
          {
            label: '勘验基本信息',
            prop: 'jbxx',
            icon: 'el-icon-edit-outline',
            column: [
              {
                label: '姓名',
                prop: 'inquirytorName',
                value: '薛队长'
              },
              {
                label: '单位',
                prop: 'inquirytorOrg',
                value: '萧山救援大队'
              },
              {
                label: '职务',
                prop: 'inquirytorOrg',
                value: '萧山救援大队',
                span: 24
              },
              {
                label: '气象条件',
                prop: 'inquirytorOrg',
                value: '萧山救援大队',
                span: 24
              },
              {
                label: '勘验情况',
                prop: 'inquirytorOrg',
                value: '萧山救援大队',
                type: 'textarea',
                span: 24
              }
            ]
          }, {
            label: '其他信息',
            prop: 'tksq',
            icon: 'el-icon-view',
            column: [
              {
                label: '负责人',
                prop: 'recordtorName',
                value: '梁副队长'
              },
              {
                label: '记录人',
                prop: 'recordtorOrg',
                value: '萧山救援大队'
              },
              {
                label: '勘验人',
                prop: 'recordtorOrg',
                value: '萧山救援大队'
              },
              {
                label: '当事人',
                prop: 'dynamic',
                type: 'dynamic',
                index: false,
                span: 24,
                children: {
                  align: 'center',
                  type: 'form',
                  headerAlign: 'center',
                  index: false,
                  rowAdd: (done) => {
                    this.$message.success('新增回调')
                    done({
                      input: '默认值'
                    })
                  },
                  rowDel: (row, done) => {
                    this.$message.success('删除回调' + JSON.stringify(row))
                    done()
                  },
                  column: [
                    {
                      label: '姓名',
                      prop: 'reInquirytorName',
                      value: '郝德占'
                    },
                    {
                      label: '时间',
                      prop: 'reInquirytorBirth',
                      type: 'date',
                      value: new Date('1991/08/19')
                    },
                    {
                      label: '证件号码',
                      prop: 'reInquirytorCardNum',
                      span: 24,
                      value: '37082919895622738'
                    },
                    {
                      label: '单位或住址',
                      prop: 'reInquirytorAddressNow',
                      span: 24,
                      value: '余杭区良渚街道亲亲家园'
                    }
                  ]
                }
              }
            ]
          }
          // {
          //   label: '证人或当事人',
          //   prop: 'yhxxs',
          //   icon: 'el-icon-edit-outline',
          //   column: [
          //     {
          //       label: '姓名',
          //       prop: 'reInquirytorName',
          //       value: '郝德占'
          //     },
          //     {
          //       label: '时间',
          //       prop: 'reInquirytorBirth',
          //       type: 'date',
          //       value: new Date('1991/08/19')
          //     },
          //     {
          //       label: '证件号码',
          //       prop: 'reInquirytorCardNum',
          //       span: 24,
          //       value: '37082919895622738'
          //     },
          //     {
          //       label: '单位或住址',
          //       prop: 'reInquirytorAddressNow',
          //       span: 24,
          //       value: '余杭区良渚街道亲亲家园'
          //     },
          //   ]
          // },

        ]

      }
    }
  },
  methods: {
    handleSubmit(obj, done) {
      this.$emit('submit', obj, done)
    }
  }
}
</script>

<style lang="scss" scoped>
.view_warper{
  p,pre{
    margin: 0;
    line-height: 40px;
  }
}
</style>
